import React from 'react';
import { Row, Col, Button, Tabs } from 'antd';
import { StickyContainer } from 'react-sticky';
import StickyNav from 'components/StickyNav';
import 'codemirror/lib/codemirror.js';
import 'codemirror/lib/codemirror.css';
import 'codemirror/theme/yonce.css';
import 'codemirror/mode/clike/clike';
import 'codemirror/mode/javascript/javascript'; //js
import 'codemirror/mode/css/css'; //css
import 'codemirror/mode/htmlmixed/htmlmixed'; //css

//代码高亮
import 'codemirror/addon/selection/active-line';
// 代码折叠
import 'codemirror/addon/fold/foldgutter.css';
import 'codemirror/addon/fold/foldcode.js';
import 'codemirror/addon/fold/foldgutter.js';
import 'codemirror/addon/fold/brace-fold.js';
import 'codemirror/addon/fold/comment-fold.js';

import 'codemirror/addon/scroll/simplescrollbars.js';
import 'codemirror/addon/scroll/simplescrollbars.css';

import { Controlled as CodeMirror } from 'react-codemirror2';

import Result from './components/Result';
import Desgin from './components/Desgin';
import Dnd from './components/Dnd';
// import Annotation from './components/Annotation';
import Hooks from './components/Hooks';
import Simplest from './components/Simplest';
import Beautiful from './components/Beautiful';
import { connect } from 'umi';
import styles from './index.less';

const { TabPane } = Tabs;

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      htmlText: '',
      cssText: '',
      jsText: '',
    };
  }

  async componentDidMount() {
    const { htmlText, cssText, jsText } = this.props.editorModel;
    this.setState({
      htmlText,
      cssText,
      jsText,
    });

    //  url，渠道
    // window.YUNDUOKETANG_OCR_DELOP1_0.init({
    //   params: {
    //     w: "web",
    //     i: "MzY3",
    //     c: "MzAzNg==",
    //     m: 3
    //   },
    //   isShowConfigEntry: true, //是否显示配置的入口按钮 （默认是true，可以不写该属性）
    //   isShowCustomEntry: true, //是否显示配置的入口按钮（默认是false）
    //   customEntryChatConfig: [ //配置自定义入口对应的 类名 和 聊天样式
    //     {
    //       type: 'chatModel',	//"chatModel"->为配置的聊天弹框"     newWindow"-> 为新打开的聊天窗口
    //       className: 'btns' //对应的类名
    //     },
    //   ],
    //   initFinish: function (result) {
    //     // debugger
    //     console.log("====222===",result)
    //   } //初始化之后的回调
    // })
  }

  onSave = async () => {
    const { value } = this.state;
  };

  callback = (key) => {
    console.log(key);
  };

  onClickSync = () => {
    const { htmlText, cssText, jsText } = this.state;
    this.props.dispatch({
      type: 'editorModel/updData',
      payload: {
        htmlText,
        cssText,
        jsText,
      },
    });
  };

  render() {
    const { htmlText, cssText, jsText } = this.state;

    const operations = <Button onClick={this.onClickSync}>同步</Button>;

    return (
      <StickyContainer>
        <StickyNav
          title={'专题设计器'}
          mode="light"
          // icon={<Icon type="left"/>}
          onLeftClick={() => console.log('onLeftClick')}
        />

        <Beautiful></Beautiful>

        {true && (
          <div>
            <Simplest></Simplest>

            <div className={styles.editorDesign}>
              <Button type="primary" onClick={this.onSave}>
                保存
              </Button>

              <Row>
                <Col span={24}>
                  <Tabs
                    defaultActiveKey="4"
                    onChange={this.callback}
                    tabBarExtraContent={operations}
                  >
                    <TabPane tab="设计" key="4">
                      <Desgin></Desgin>
                    </TabPane>
                    <TabPane tab="html 文件" key="1">
                      <CodeMirror
                        value={htmlText}
                        options={{
                          lineNumbers: true, //显示行号
                          mode: { name: 'htmlmixed' }, //语言
                          autofocus: true, //自动获取焦点
                          styleActiveLine: true, //光标代码高亮
                          theme: 'yonce', //主题
                          scrollbarStyle: 'overlay',
                          lineWrapping: false, //代码自动换行
                          foldGutter: true,
                          gutters: [
                            'CodeMirror-linenumbers',
                            'CodeMirrorfoldgutter',
                          ], //end
                          //括号匹配
                          matchBrackets: true,
                          // 智能提示
                          extraKeys: { 'Ctrl-Space': 'autocomplete' }, //ctrl-space唤起智能提示
                        }}
                        onBeforeChange={(editor, data, value) => {
                          this.setState({ htmlText: value });
                        }}
                        onChange={(editor, data, value) => {}}
                      />
                    </TabPane>

                    {/*js 文件*/}
                    <TabPane tab="js 文件" key="2">
                      <CodeMirror
                        value={jsText}
                        options={{
                          lineNumbers: true, //显示行号
                          mode: { name: 'javascript', json: true }, //语言
                          autofocus: true, //自动获取焦点
                          styleActiveLine: true, //光标代码高亮
                          theme: 'yonce', //主题
                          scrollbarStyle: 'overlay',
                          lineWrapping: false, //代码自动换行
                          foldGutter: true,
                          gutters: [
                            'CodeMirror-linenumbers',
                            'CodeMirrorfoldgutter',
                          ], //end
                          //括号匹配
                          matchBrackets: true,
                          // 智能提示
                          extraKeys: { 'Ctrl-Space': 'autocomplete' }, //ctrl-space唤起智能提示
                        }}
                        onBeforeChange={(editor, data, value) => {
                          this.setState({ jsText: value });
                        }}
                        onChange={(editor, data, value) => {}}
                      />
                    </TabPane>

                    {/*css 文件*/}
                    <TabPane tab="css 文件" key="3">
                      <CodeMirror
                        value={cssText}
                        options={{
                          lineNumbers: true, //显示行号
                          mode: 'css', //语言
                          autofocus: true, //自动获取焦点
                          styleActiveLine: true, //光标代码高亮
                          theme: 'yonce', //主题
                          scrollbarStyle: 'overlay',
                          lineWrapping: false, //代码自动换行
                          foldGutter: true,
                          gutters: [
                            'CodeMirror-linenumbers',
                            'CodeMirrorfoldgutter',
                          ], //end
                          //括号匹配
                          matchBrackets: true,
                          // 智能提示
                          extraKeys: { 'Ctrl-Space': 'autocomplete' }, //ctrl-space唤起智能提示
                        }}
                        onBeforeChange={(editor, data, value) => {
                          this.setState({ cssText: value });
                        }}
                        onChange={(editor, data, value) => {}}
                      />
                    </TabPane>

                    <TabPane tab="预览" key="5">
                      <Result />
                    </TabPane>
                  </Tabs>
                </Col>

                <Col span={24}>
                  {/*<Dnd></Dnd>*/}
                  {/*<Annotation></Annotation>*/}
                  {/*<Hooks></Hooks>*/}
                </Col>
              </Row>
            </div>
          </div>
        )}
      </StickyContainer>
    );
  }
}

// @ts-ignore
export default connect(({ editorModel }) => ({
  editorModel,
}))(App);
